<!doctype html>
<html lang="zh_cn">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<meta name="description" content="" /> 

<!--Google fonts-->
<!-- <link rel="stylesheet" href="static/css/8e5e25669fa64d0582460333a8137834.css"> -->

<!--vendors styles-->
<!-- <link rel="stylesheet" href="static/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/slick.min.css">
<link rel="stylesheet" href="static/css/slick-theme.min.css"> -->

<!-- Bootstrap CSS / Color Scheme -->
<link rel="stylesheet" href="static/css/default.css" id="theme-color">
</head>
<body data-spy="scroll" data-target="#beleme-navbar" data-offset="0">

<!--hero header-->
<section class="bg-hero py-7 py-md-0" id="home" style="background-image: url(static/images/parallex.jpg)">
	<div class="container">
		<div class="row vh-md-100">
			
			<div class="col-md-8 mx-auto my-auto text-white text-center">
				
				<img src="static/picture/user.jpg" class="img-fluid rounded-circle img-profile" alt="User" />
				<h1 class="my-4">Hi, I'm Mason.</h1>
				<p class="lead mb-5 font-weight-bold">
					一位经验丰富的
					<span class="typist" data-typist="UI/UX设计师">UI/UX设计师</span>
				</p>
				<a href="#about" class="btn btn-primary d-inline-flex flex-row align-items-center page-scroll">
					了解更多
				</a>
			</div>
		</div>
	</div>
</section>

<!--navigation-->
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top sticky-navigation" id="beleme-navbar">
	<a class="navbar-brand d-md-none" href="index.html">
		Beleme
	</a>
	<button class="navbar-toggler navbar-toggler-right text-white" type="button" data-toggle="collapse" 
			data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
		<span data-feather="grid"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarCollapse">
		<ul class="navbar-nav mx-auto">
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#home">首页 <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#about">关于我</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#portfolio">作品集</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#experience">工作经验</a>
			</li>
			<!-- <li class="nav-item">
				<a class="nav-link page-scroll" href="#education">Education</a>
			</li> -->
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#skills">技能</a>
			</li>
			<li class="nav-item">
				<a class="nav-link page-scroll" href="#services">服务</a>
			</li>
			<!-- <li class="nav-item">
				<a class="nav-link page-scroll" href="#testimonials">Testimonials</a>
			</li> -->
			<!-- <li class="nav-item">
				<a class="nav-link page-scroll" href="#contact">Contact</a>
			</li> -->
		</ul>
	</div>
</nav>

<!--about section-->
<section class="py-7" id="about">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2>About Me</h2>
				<div class="divider bg-primary mx-auto"></div>
				<p class="lead1">
					你好👋，我是廖美盛，一位有着丰富经验的UI/UX设计师
				</p>
				<p class="text-muted">
					本科视觉传达设计专业毕业，熟知iOS/Android/Web界面规范及交互规则，具有较强的需求分析能力和项目把控能力。精通Sketch、PS、AI、Figma、AE等主流视觉设计软件，研究用户审美倾向进而优化现有产品，对交互设计和用户体验有较深理解。能够运用AE、Protopie制作动态效果。对工作始终保持兴趣与热爱，积极参加各种设计比赛，通过做项目、做总结、不断学习提升自身设计水平。
				</p>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-6 mx-auto text-center">
				<a class="btn btn-primary" href="https://github.com/Helms1997/lms/raw/main/UI%26UX%20%E8%AE%BE%E8%AE%A1%E5%B8%88_%E5%BB%96%E7%BE%8E%E7%9B%9B.pdf">
					下载简历
				</a>
				<a class="btn btn-outline-primary page-scroll" href="#contact">
					与我联系
				</a>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-12 text-muted text-center font-weight-bold">   :</div>
			<div class="col-md-10 mx-auto">
				<div class="row press mt-5">
					<div class="press-item col-lg-3 col-md-4 col-6"><img class="img-fluid" src="static/picture/press-1.png" alt=""></div>
					<div class="press-item col-lg-3 col-md-4 col-6"><img class="img-fluid" src="static/picture/press-2.png" alt=""></div>
					<div class="press-item col-lg-3 col-md-4 col-6"><img class="img-fluid" src="static/picture/press-3.png" alt=""></div>                                 
					<div class="press-item col-lg-3 col-md-4 col-6"><img class="img-fluid" src="static/picture/press-4.png" alt=""></div> 
				</div>
			</div>
		</div>
	</div>
</section>

<!--portfolio section-->
<section class="py-7" id="portfolio">
	<div class="portfolioContainer">
		<div class="row">
			<div class="col-md-6 mx-auto text-center">
				<h2>我的作品</h2>
				<div class="divider bg-primary mx-auto"></div>
			</div>
		</div>
		<div class="portfolioBox">
			<div class="portfolioCard">
				<a href="./static/html/zuopin1.html" target="_blank">
					<img class="portfolio-card-img-top rounded" src="static/picture/ggj/ggjfm.png" alt="Work 1">
					<div class="portfolio-card-body px-0">
						<h5 class="portfolio-card-title">「B端」智能广告机后台管理系统</h5>
						<p class="portfolio-card-text text-muted">Web设计 B端 UI</p>
					</div>
				</a>
			</div>
			
			
			<div class="portfolioCard">
				<a href="./static/html/zuopin2.html" target="_blank">
					<img class="portfolio-card-img-top rounded" src="static/picture/master/mastegofm.png" alt="Work 1">
					<div class="portfolio-card-body px-0">
						<h5 class="portfolio-card-title">「网页设计」MasterGo 官网设计</h5>
						<p class="portfolio-card-text text-muted">Web Design</p>
					</div>
				</a>
			</div>
			<div class="portfolioCard">
				<a href="./static/html/zuopin3.html" target="_blank">
					<img class="portfolio-card-img-top rounded" src="static/picture/hm/app.png" alt="Work 1">
					<div class="portfolio-card-body px-0">
						<h5 class="portfolio-card-title">一站式海外购物APP</h5>
						<p class="portfolio-card-text text-muted">APP DESIGN</p>
					</div>
				</a>
			</div>
			<div class="portfolioCard">
				<a href="./static/html/zuopin4.html" target="_blank">
					<img class="portfolio-card-img-top rounded" src="static/picture/pinmian/fm.png" alt="Work 1">
					<div class="portfolio-card-body px-0">
						<h5 class="portfolio-card-title">平面设计作品</h5>
						<p class="portfolio-card-text text-muted">海报 画册 合成</p>
					</div>
				</a>
			</div>
		</div>
	</div>
</section>

<!--work experience-->
<section class="py-7 bg-primary" id="experience">
	<div class="container">
		<div class="row">
			<div class="col-md-10 mx-auto">
				<h2 class="text-white text-center">工作经验</h2>
				<div class="divider bg-white mx-auto"></div>
				<div class="card mt-5">
					<div class="card-body">
						<div class="timeline px-sm-5">
							<div class="root"></div>
							<div class="root">
								<div class="date">2021/03 &mdash; 至今</div>
								<div class="dot"></div>
								<div class="event">
									<h5 class="mb-2 zhiwei">高级UI设计师</h5>
									<div class="text-muted small-xl">
										<span>浙江云针信息科技有限公司</span>
										<span class="bull">•</span>
										<span>杭州</span>
									</div>
									<div class="content mt-4 px-0">
										1、负责公司核心项目，设计与跟进交互设计规范输出，UI 界面设计输出，配合开发测试页面落地；协同产品迭代，观测数据，复盘数据，进一步评估持续调整方案，在B端项目广告机管理后台UI/UX设计中获得较高的认可度，被评为年度优秀员工。
										<br> <br>2、树立“体验驱动”设计理念，以用户为中心而设计；推动团队使用多人协作设计工具Figma，并主导规划设计了团队组件库，提升了团队整体作战能力，注重团队整体目标的实现。负责设计统筹，设计与分配工作，规划时间节点和完成质量。
										<br> <br>3、参与设计公司部分产品的运营banner、企业宣传册、招聘海报、展会海报等平面设计工作。
									</div>
								</div>
							</div>
							<div class="root">
								<div class="date">2020/03 &mdash; 10</div>
								<div class="dot"></div>
								<div class="event">
									<h5 class="mb-2 zhiwei">UI设计师</h5>
									<div class="text-muted small-xl">
										<span>厦门星罗网络科技有限公司</span>
										<span class="bull">•</span>
										<span>厦门</span>
									</div>
									<div class="content mt-4 px-0">
										1、与团队协作完成公司涂色类小游戏需求分析及界面优化并输出高质量UI界面。
										<br> <br> 2、与团队协作完成小视频模板制作APP《简拍》V1.2版本需求分析及交互优化，我主要负责视频编辑页面与完成页面的交互优化提升产品体验。
										<br> <br> 3、参与设计公司部分产品的运营banner、商店图、渠道图、落地页等平面工作。
									</div>
								</div>
							</div>
							
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!--education section-->
<!-- <section class="py-7 bg-light" id="education">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2>Education</h2>
				<div class="divider bg-primary mx-auto"></div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-4 mb-3">
				<div class="card">
					<div class="card-body">
						<span class="text-muted font-weight-bold">2013 &mdash; 2014</span>
						<h5>Master in Computer Science</h5>
						<p class="text-muted small-xl">Oxford University</p>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
							Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
					</div>
				</div>
			</div>
			<div class="col-md-4  mb-3">
				<div class="card">
					<div class="card-body">
						<span class="text-muted font-weight-bold">2010 &mdash; 2013</span>
						<h5>Bachelor in Computer Science</h5>
						<p class="text-muted small-xl">London Scool of Science & Technology</p>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
							Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-3">
				<div class="card">
					<div class="card-body">
						<span class="text-muted font-weight-bold">2008 &mdash; 2010</span>
						<h5>Diploma in Applied Sciences</h5>
						<p class="text-muted small-xl">University of Saarland</p>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
							Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section> -->

<!--skills section-->
<section class="py-7" id="skills">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2>My Skills</h2>
				<div class="divider bg-primary mx-auto"></div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-6 px-5">
				<h5>Design Skills</h5>
				<div class="skill">
					<div class="skill-name">Figma <span class="badge badge-primary float-right">95%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				
				<div class="skill">
					<div class="skill-name">Sketch <span class="badge badge-primary float-right">90%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				<div class="skill">
					<div class="skill-name">Photoshop <span class="badge badge-primary float-right">80%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				
			</div>
			<div class="col-md-6 px-5">
				<h5> <br> </h5>
				<div class="skill">
					<div class="skill-name">Protopie <span class="badge badge-primary float-right">80%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				<div class="skill">
					<div class="skill-name">After Effects <span class="badge badge-primary float-right">50%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				<div class="skill">
					<div class="skill-name">Illstrator <span class="badge badge-primary float-right">70%</span></div>
					<div class="progress">
						<div class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</section>

<!--services section-->
<section class="py-7 bg-primary" id="services">
	<div class="container">
		<div class="row">
			<div class="col-md-7 mx-auto text-center">
				<h2 class="text-white">我能为您做什么？</h2>
				<div class="divider bg-white mx-auto"></div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col-md-4 mb-3 servicescard">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small text-primary">
								<span data-feather="crop" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="my-3 services_title">网页设计</h5>
						<p class="services_desc">熟悉网页设计规范，多个网页设计项目经验<br><br><br><br></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-3 servicescard">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small text-primary">
								<span data-feather="monitor" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="my-3 services_title">大屏设备</h5>
						<p class="services_desc">智能电视、大屏显示设备<br><br><br><br></p>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-3 servicescard">
				<div class="card">
					<div class="card-body text-center">
						<div class="icon-box">
							<div class="icon-box-inner small text-primary">
								<span data-feather="briefcase" width="30" height="30"></span>
							</div>
						</div>
						<h5 class="my-3 services_title">APP小程序设计</h5>
						<p class="services_desc">熟悉「Apple Design」与「Google Material」设计规范，对交互设计与用户体验提升有较深的理解<br><br></p>
					</div>
				</div>
			</div>

		</div>
	</div>
</section>



<!--footer / contact-->
<footer class="py-6 bg-dark text-white" id="contact">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h5 class="text-white">设计是一种生活态度</h5>
				<div class="divider divider-sm bg-white mt-3"></div>
				<p class="mt-4">
					设计是一种追求完美的生活态度,设计是一种追求品味的生活概念
				</p>
				<!-- <ul class="list-inline social social-sm social-rounded mt-4">
					<li class="list-inline-item">
						<a href=""><i class="fa fa-facebook"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-twitter"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-google-plus"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-linkedin"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-dribbble"></i></a>
					</li>
					<li class="list-inline-item">
						<a href=""><i class="fa fa-skype"></i></a>
					</li>
				</ul> -->
			</div>
			<div class="col-md-4 ml-auto">
				<h5 class="text-white">我的联系方式</h5>
				<div class="divider divider-sm bg-white mt-3"></div>
				<ul class="list-unstyled mt-4">
					<li class=" mb-2">
						<span class="mr-2" data-feather="phone" width="20" height="20"></span>
						158-6919-2239
					</li>
					<li class=" mb-2">
						<span class="mr-2" data-feather="mail" width="20" height="20"></span>
						liaoms1997@gmail.com
					</li>
					<li class=" mb-2">
						<span class="mr-2" data-feather="map-pin" width="20" height="20"></span>
						Hangzhou, Zhejiang, China
					</li>
				</ul>
			</div>
		</div>
		<hr class="my-5"/>
		<div class="row">
			<div class="col-12 text-muted text-center">
				This page is for personal job search only
			</div>
		</div>
	</div>
</footer>

<!--scroll to top-->
<div class="scroll-top">
	<img class="fa fa-angle-up" aria-hidden="true" src="./static/picture/up.png"/>
</div>

<!-- theme switcher (FOR DEMO ONLY - REMOVE FROM PRODUCTION)-->
<div class="switcher-wrap">
	<div class="switcher-trigger">
		<span class="fa fa-gear"></span>
	</div>
	<div class="color-switcher">
		<h6>Color Switcher</h6>
		<ul class="mt-3 clearfix">
			<li class="bg-black active" data-color="default" title="Default Black"></li>
			<li class="bg-green" data-color="green" title="Green"></li>
			<li class="bg-indigo" data-color="indigo" title="Indigo"></li>
			<li class="bg-orange" data-color="orange" title="Orange"></li>
			<li class="bg-red" data-color="red" title="Red"></li>
			<li class="bg-blue" data-color="blue" title="Blue"></li>
			<li class="bg-teal" data-color="teal" title="Teal"></li>
			<li class="bg-cyan" data-color="cyan" title="Cyan"></li>
			<li class="bg-purple" data-color="purple" title="Purple"></li>
			<li class="bg-pink" data-color="pink" title="Pink"></li>
		</ul>
		<p>These are just demo colors. You can <b>easily</b> create your own color scheme.</p>
	</div>
</div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="static/js/jquery-3.2.1.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/feather.min.js"></script>
<script src="static/js/typist.min.js"></script>
<script src="static/js/slick.min.js"></script>
<script src="static/js/scripts.js"></script>
</body>
</html>